<template>
    <div class="fillcontain">
        <head-top></head-top>
        <header class="admin_title">服务年限管理-填写最大的服务年限</header>
        <div class="admin_set">
            <br />
            <br />
            <br />
            <br />
            <br />
            <el-col :span="12" :offset="6">
            <el-form :model="SystemConfig">
                <el-form-item label="配置名称:" :label-width="formLabelWidth">
                    <el-col :span="18">
                        <el-input v-model="SystemConfig.configtypename" readonly="" autocomplete="off"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="配置数值:" :label-width="formLabelWidth">
                    <el-col :span="18">
                        <el-input v-model="SystemConfig.configvalue" autocomplete="off"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            </el-col>
            <el-col :span="2" :offset="11"><el-button type="primary" @click="update" center>保存</el-button></el-col>
        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
    import {mapState} from 'vuex'
    import {queryByConfigType,updateSystemConfig} from '@/api/getData'
    export default {
        data(){
            return {
                formLabelWidth: '120px',
                SystemConfig:{}
            }
        },
    	components: {
    		headTop,
    	},created() {
            this.getData();
        },
        computed: {
            ...mapState(['adminInfo']),
        },
        methods: {
           async getData() {
               try {
                   const res = await queryByConfigType(3);
                   this.SystemConfig = res[0];
               } catch (err) {
                   console.log('获取数据失败', err);
               }
           },
           async update(){
               const res = await updateSystemConfig(this.SystemConfig);
               if (res.status == 1) {
                   this.$message({

                       type: 'success',

                       message: res.message

                   });
                   this.getData();
               } else {
                   this.$message({

                       type: 'error',

                       message: res.message

                   });
               }
           }
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.explain_text{
		margin-top: 20px;
		text-align: center;
		font-size: 20px;
		color: #333;
	}
    .admin_set{
        width: 60%;
        background-color: #F9FAFC;
        min-height: 400px;
        margin: 20px auto 0;
        border-radius: 10px;
        ul > li{
            padding: 20px;
            span{
                color: #666;
            }
        }
    }
    .admin_title{
        margin-top: 20px;
        .sc(24px, #666);
        text-align: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        margin-top: 10px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
